<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			.main{
				width:1000px;
				height:600px;
				background: 1px solid #ccc;
				background: #000;
				margin:0 auto;
				
			}
			.count{
				width:300px;
				height:580px;
				border:1px solid #fff;
				float: left;
				margin-left:20px;
				margin-top:10px;
				color:#fff;
				font-size: 24px;
				padding:160px 80px;
				box-sizing: border-box;
			}
			.ye_mian{
				width:600px;
				height:580px;
				border:1px solid #fff;
				float: right;
				margin-right:20px;
				margin-top:10px;
				color:#fff;
			}
			.logo_top{
				width:96%;
				height:260px;
				
			}
			.logo_top img{
				margin-left:110px;
				margin-top:50px;
		}
			.logo{
				width:96%;
				height:300px;
				margin-left:2%;
				border:1px solid #ccc;
			}
			.logo img{
				margin-left:40px;
				margin-top:80px;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="count">
				<p class="zong">总的局数:0</p>
				<p class="sheng">胜利局数:0</p>
				<p class="shi">失败局数:0</p>
				<p class="ping">平均局数:0</p>
			</div>
			<div class="ye_mian">
				<div class="logo_top">
					<img src="ye1_03.png" class="wj" alt="">玩家
					<img src="ye1_05.png" class="dn" alt="">电脑
				</div>
				<div class="logo">
					<img src="ye1_03.png" alt="">
					<img src="ye1_10.png" alt="">
					<img src="ye1_05.png" alt="">
				</div>
			</div>
		</div>
	</body>	
	<script>
		var arr = ["ye1_03.png","ye1_10.png","ye1_05.png"]
		var sl=0
		var sb=0
		var pj=0
		var zs=0
		var logo = document.getElementsByClassName("logo")[0].getElementsByTagName("img")
		var wj = document.getElementsByClassName("wj")[0]
		var dn = document.getElementsByClassName("dn")[0]
		var sheng = document.getElementsByClassName("sheng")[0]
		var zong = document.getElementsByClassName("zong")[0]
		var ping = document.getElementsByClassName("ping")[0]
		var shi = document.getElementsByClassName("shi")[0]
		for(let i=0; i<logo.length; i++){
			
			logo[i].onclick=function(){
				wj.src = arr[i]
				console.log(arr[i])
				var sui = Math.floor(Math.random()*arr.length)
				console.log(sui)
				dn.src = arr[sui]
				zs++;
				zong.innerHTML="总的局数:"+zs;
				if(i==0 && sui==2 || i==1 && sui==0 || i==2 && sui==1){
					sl+=1
					sheng.innerHTML="胜利局数:"+sl
				}else if(i==sui){
					pj+=1
					ping.innerHTML="平均局数:"+pj
				}else{
					sb+=1
					shi.innerHTML="失败局数:"+sb
				}
			}
		}
		
	</script>
</html>
